<div class="toolbar"></div>
<div class="p-3">
    <div class="card">
        <div class="d-flex mt-3 mb-3">
            <div class="flex-grow-1 border-right" style="max-width: 200px;">
                <ts-side-tabs [target]="tabContents">
                    <ts-tab [active]="true">
                        <div class="ml-2">账户信息</div>
                    </ts-tab>
                    <ts-tab>
                        <div class="ml-2">详细信息</div>
                    </ts-tab>
                    <ts-tab>
                        <div class="ml-2">消息通知设置</div>
                    </ts-tab>
                </ts-side-tabs>
            </div>
            <div #tabContents="tsTabs" tsTabs class="flex-grow-1 pl-2">
                <!-- 账户信息 -->
                <div tsTab>
                    <h5 class="card-header">账户信息</h5>
                    <div class="card-body">
                        <form autocomplete="off" class="container m-0" style="max-width: 600px;">
                            <div class="form-group">
                                <label>头像</label>
                                <div>
                                    <ts-image-card [(src)]="manager.avatar" [config]="options" title=""></ts-image-card>
                                </div>
                            </div>
                            <div class="form-group">
                                <label>账号</label>
                                <input readonly required [value]="manager.account" type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>密码</label>
                                <input type="password" style="display: none;" />
                                <input name="ps" autocomplete="new-password" [(ngModel)]="manager.password" type="password"
                                    class="form-control" placeholder="如果不修改密码，此处不填写">
                            </div>
                            <div class="form-group m-btn">
                                <button tsBtn (click)="location.back()">取消/返回</button>
                                <button tsBtn loading (submit)="confirmUpdate($event)" color="info">确认修改</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- 详细信息 -->
                <div tsTab>
                    <h5 class="card-header">详细信息</h5>
                    <div class="card-body">
                        <form autocomplete="off" class="container m-0" style="max-width: 600px;">
                            <div class="form-group">
                                <label>邮箱</label>
                                <input required type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>昵称</label>
                                <input required type="text" class="form-control">
                            </div>
                            <div class="form-group">
                                <label>个人简介</label>
                                <textarea required type="text" class="form-control"></textarea>
                            </div>
                            <div class="form-group">
                                <label>联系电话</label>
                                <input required type="text" class="form-control">
                            </div>
                            <div class="form-group m-btn">
                                <button tsBtn (click)="location.back()">取消/返回</button>
                                <button tsBtn color="info">该功能不可用</button>
                            </div>
                        </form>
                    </div>
                </div>
                <!-- 消息通知设置 -->
                <div tsTab>
                    <h5 class="card-header">消息通知设置</h5>
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <p>启用短信通知</p>
                                <p class="text-muted">开启短信通知，每次有重要的消息将会主动推送到您的手机上</p>
                            </div>
                            <ts-switch></ts-switch>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between">
                            <div>
                                <p>接受语音消息</p>
                                <p class="text-muted">允许系统发送语音提示消息</p>
                            </div>
                            <ts-switch></ts-switch>
                        </div>
                        <hr>
                        <div class="d-flex justify-content-between">
                            <div>
                                <p>接收消息</p>
                                <p class="text-danger">如果关闭，您将收不到任何消息！</p>
                            </div>
                            <ts-switch [ngModel]="true"></ts-switch>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>